<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol.js"></script>
	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var styles = {
				'line110': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: [14, 197, 32, 1],
						width: 3
					}),
					zIndex: 2
				})]
			};
			var projection = ol.proj.get("EPSG:4326");
			var map;
			var maxZoom = 20,
				minZoom = 4,
				initZoom = 12;
			// 底图图层
			var mapLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: projection,
					url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"
				}),
				opacity: 0.5
			});
			// 文字图层
			var wordLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: projection,
					url: "http://t7.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}"
				}),
				opacity: 0.7
			});
			// 视图范围
			var view = new ol.View({
				center: [117.205543, 39.1283], // 必需
				projection: projection, // 必需
				// extent: [116.781271, 39.124963, 117.33521, 39.707455], /*设置武清的范围*/
				zoom: initZoom,
				minZoom: minZoom,
				maxZoom: maxZoom
			});
			// 线路数据集
			var source = new ol.source.Vector({
				features: new ol.Collection(),
				useSpatialIndex: false
			});
			var styleFunction = function(feature, resolution) {
				if (feature.get("type")) {
					return styles[feature.get("type")];
				}
			};
			// 线路图层
			var vectorLayer = new ol.layer.Vector({
				source: source,
				style: styleFunction
			});
			/**
			 * 地图初始化方法
			 */
			map = new ol.Map({
				target: "map",
				layers: [mapLayer, wordLayer, vectorLayer],
				view: view,
			});
			var fea = pgTol("MULTILINESTRING ((117.14540238346466 39.301447353343015, 117.145644659865 39.30150901488559))");
			fea.set("type", "line110");
			source.addFeatures(fea);
			 map.getView().fit(fea.getGeometry(),map.getSize());
			/**
			 * 将PG的几何对象转换成OL的几何对象
			 * 
			 * @param PG的集合对象
			 * @return ol.geom.Geometry
			 */
			function pgTol(pg) {
				var format = new ol.format.WKT();
				var feature = format.readFeature(pg);
				return feature;
			}
		</script>
	</body>

</html>